<template>
  <div class="home">
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="家政服务" />
      </van-sticky>
    </div>
    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid :column-num="5">
        <van-grid-item v-for="(category,index) in categoryData" :key="category.id" :icon="category.icon" :text="category.name" @click="toProduct(category.id, index)" />
      </van-grid>
    </div>
    <!-- 底部产品展示区域 -->
    <div class="product">
      <van-card
        v-for="product in productData"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>
    <div style="height:80px"></div>
  </div>
</template>

<script>
// 引入axios
import {get} from '@/http/axios'
// 引入vuex的辅助函数
import {mapActions, mapState} from 'vuex'
export default {
  data() {
    return {
      // 轮播图数组
      swipeData:[]
    }
  },
  computed:{
    // 引入栏目数据
    ...mapState('category',['categoryData']),
    ...mapState('product',['productData']),
  },
  methods: {
    // 引入category vuex中的方法
    ...mapActions('category', ['getAllCategoryData']),
    // 引入peoduct vuex中的方法
    ...mapActions('product', ['getAllProductData']),
    // 获取所有轮播图的数据
    async getAllSwipeData(){
      let res = await get('/carousel/query',{status: '正常'})
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data
    },
    // 查询栏目数据
    queryCategory(){
      let data = {
        page: 1,
        pageSize: 5
      }
      // 调用vuex中的方法 传参
      this.getAllCategoryData(data)
    },
    // 获取产品数据
    queryProduct(){
      let data = {
        page: 1,
        pageSize: 8
      }
      this.getAllProductData(data)
    },
    // 跳转到产品页面 并且传递参数
    toProduct(categoryId, activeKey){
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path:'/manager/product',
        // 参数的传递
        query:{
          categoryId,
          activeKey
        }
      })
    }
  },
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData()
    // 自动获取栏目数据
    this.queryCategory()
    // 自动获取产品数据
    this.queryProduct()
  },
};
</script>

<style scoped>
/* 设置轮播区域的样式 */
.my-swipe, .my-swipe img{
  height: 200px;
}
</style>